<!--  -->
<template>
  <div>
    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>
    <home-swiper :banners="banners"></home-swiper>
    <recommend-view :recommends="recommends"></recommend-view>

  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
import HomeSwiper from './childComps/HomeSwiper'
import RecommendView from './childComps/RecommendView'

import {banners,recommends} from  'network/home'

export default {
  name: 'Home',
  components: {
    NavBar,
    HomeSwiper,
    RecommendView
  },
  data(){
    return {
      banners: [],
      recommends: []
    }
  },
  created(){
    
    banners().then(res => {
      this.banners = res
    })

    recommends().then(res => {
      this.recommends = res
    })
  }
}

</script>
<style scoped>
  .home-nav{
    background-color: var(--color-tint);
    color: var(--color-font);
  }
</style>